<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header back :title="title"></Header>
		<view class="wapper">
			<view class="content" @blur="over" v-html="content" contenteditable="true" ref="editor" @input="change">

			</view>
			<view class="btns">
				<u-button text="修改" @click="submit" type="primary" :loading="loading"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				loading: false,
				height: 0,
				content: '',
				title: '首页简介',
				id: 0,
				user: null
			}
		},
		methods: {
			async init() {
				let res = await this.$api.getContent({
					ChangShangID: this.id
				})
				// console.log(res)
				this.content = res.UserData.Content
			},
			change(e) {
				// const range = window.getSelection()
				// console.log(range.collapseToEnd)
				// let dom = this.$refs.editor.$el
				// dom.focus()
				// if (range) {

				// 	// range 选择obj下所有子内容

				// 	range.selectAllChildren(dom)

				// 	// 光标聚焦在文字最后

				// 	range.collapseToEnd()

				// }
				// this.content = this.$refs.editor.$el.innerHTML
				// console.log(this.content)
			},
			over() {
				this.content = this.$refs.editor.$el.innerHTML
			},
			async submit() {
				this.loading = true
				let res = await this.$api.changeContent({
					OpenID: this.user.OpenID,
					ZhanShangID: this.user.ZhanShangInfo.ZhangShangID,
					ZhanShangContent: this.content
				})
				if (res.Status == 0) {
					this.loading = false
					uni.$u.toast('修改成功!')
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/me'
						})
					}, 1000)
				}else{
					
				}
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		},
		async mounted() {
			this.user = uni.getStorageSync('user')
			await this.init()
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			z-index: 100;
			margin-top: -280rpx;
			padding: 20rpx;

			.content {
				padding: 10rpx;
				min-height: 400rpx;
				box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.5);
				font-size: 28rpx;
				outline-color: rgba(0, 0, 0, 0.5);
			}

			.btns {
				margin-top: 20rpx;
			}
		}
	}
</style>